<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>水质监测</title>
    <link rel="stylesheet" href="css/index.css">
    <!--
        访问地址：https://paycloud.vip

    -->
</head>

<body>

    <div class="content-body">
        <div class="header">
            <div class="header-left">
                <span>水质情况实时监测预警系统</span>
            </div>
            <div class="header-time">
                <span id="time"></span>
            </div>
        </div>

        <div class="content">
            <div class="content-con">
                <div class="left-body">
                    <div class="left-top public-bg">
                        <div class="public-title">重点水质量检测区</div>
                        <div class="top-body">
                            <div class="top-left">
                                <div class="top-left-title">
                                    <h6>注水量</h6>
                                    <b id="wrap"></b>
                                    <img src="image/pictre.png" alt="">
                                </div>

                            </div>
                            <div class="top-right">
                                <div class="top-left-title">
                                    <h6>泄水量</h6>
                                    <b id="wrac"></b>
                                    <img src="image/pictre.png" alt="">
                                </div>
                            </div>


                        </div>

                    </div>
                    <div class="left-con public-bg" id="wb">
                        <div class="public-title">水质量分布情况</div>
                        <div class="title-nav" id="leida"></div>
                    </div>
                    <div class="left-bottom public-bg">
                        <div class="public-title">企业污染排放情况</div>
                        <div class="title-nav" id="wuran"></div>
                    </div>
                </div>

                <div class="center-body">
                    <div class="map" id="map"></div>
                </div>

                <div class="right-body">
                    <div class="right-top public-bg">
                        <div class="public-title">水质污染TOP6</div>
                        <div class="title-nav">
                            <div class="top5-ul" id="wap">

                                <ul>
                                    <!-- <li>
                                        <span class="levy">1</span>
                                        <span>严重</span>
                                        <span>北京市</span>
                                        <span>房山区</span>
                                        <span>重度污染</span>
                                        <span>15公里</span>
                                    </li> -->


                                </ul>
                            </div>
                        </div>
                    </div>
                    <div class="right-con public-bg" id="wrp">
                        <div class="public-title">水质类别占比</div>
                        <div class="title-nav" id="huaxing"></div>
                    </div>
                    <div class="right-bottom public-bg">
                        <div class="public-title">主要地区水流量</div>
                        <div class="title-nav" id="zhexian"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--
    访问地址：https://paycloud.vip

-->
</body>

</html>

<script src="https://www.jq22.com/jquery/echarts-4.2.1.min.js"></script>
<script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<script type="text/javascript" src="js/china.js"></script>
<script type="text/javascript" src="js/index.js"></script>


<script>
    //顶部时间
    function getTime() {
        var myDate = new Date();
        var myYear = myDate.getFullYear(); //获取完整的年份(4位,1970-????)
        var myMonth = myDate.getMonth() + 1; //获取当前月份(0-11,0代表1月)
        var myToday = myDate.getDate(); //获取当前日(1-31)
        var myDay = myDate.getDay(); //获取当前星期X(0-6,0代表星期天)
        var myHour = myDate.getHours(); //获取当前小时数(0-23)
        var myMinute = myDate.getMinutes(); //获取当前分钟数(0-59)
        var mySecond = myDate.getSeconds(); //获取当前秒数(0-59)
        var week = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
        var nowTime;

        nowTime = myYear + '年' + fillZero(myMonth) + '月' + fillZero(myToday) + '日' + '&nbsp;&nbsp;' + fillZero(myHour) + ':' + fillZero(myMinute) + ':' + fillZero(mySecond) + '&nbsp;&nbsp;' + week[myDay] + '&nbsp;&nbsp;';
        //console.log(nowTime);
        $('#time').html(nowTime);
    };

    function fillZero(str) {
        var realNum;
        if (str < 10) {
            realNum = '0' + str;
        } else {
            realNum = str;
        }
        return realNum;
    }
    //大屏
    setInterval(getTime, 1000);
</script>
<!-- <script>
    $(document).ready(function() {
        myChart.resize();
        myChart1.resize();
    })
    window.addEventListener("resize", function() {
        myChart.resize();
        myChart1.resize();
    })
</script> -->
<script>
    $(document).ready(function() {

        $.ajax({
            url: "/water/fndTopFive", //请求地址
            dataType: "json", //数据格式
            type: "get", //请求方式
            async: false, //是否异步请求
            success: function(res) { //如何发送成功
                var html = "";
                var data = res.data
                //console.log(res);

                //console.log(data);
                for (var i = 0; i < data.length; i++) { //遍历data数组

                    // console.log(data[j])

                    if (data[i][0] == '1') {
                        html += `<li><span  style="background-color:green">轻微</span>
                        <span>` + data[i][1] + `</span>
                                        <span>` + data[i][2] + `</span>
                                        <span>轻微污染</span>
                                        <span>` + data[i][4] + `公里</span>
                                     </li> `

                    } else if (data[i][0] == '2') {
                        html += `<li><span  style="background-color:orange">中度</span>
                        <span>` + data[i][1] + `</span>
                                        <span>` + data[i][2] + `</span>
                                        <span>中度污染</span>
                                        <span>` + data[i][4] + `公里</span>
                                       </li> `

                    } else if (data[i][0] == '3') {
                        html += `<li><span  style="background-color:red">严重</span>
                        <span>` + data[i][1] + `</span>
                                        <span>` + data[i][2] + `</span>
                                        <span>严重污染</span>
                                        <span>` + data[i][4] + `公里</span>
                                      </li> `
                    }

                    // html += `

                    //                     <li>
                    //                         <span class="levy">` + data[i][0] + `</span>
                    //                         <span>` + data[i][1] + `</span>
                    //                     <span>` + data[i][2] + `</span>
                    //                     <span>` + data[i][3] + `</span>
                    //                     <span>` + data[i][4] + `</span>


                    //                 </li>`



                }
                // for (var i = 0; i < data.length; i++) { //遍历data数组
                //     var ls = data[i];
                //     console.log(ls)
                //         html += `
                //              <li>
                //                 <p>` + ls.id + ls.name + `-支付宝支付` + ls.money + `元-` + ls.shopname + `门店</p>
                //             </li>`
                // }

                $("#wap").html(html); //在html页面id=ulul的标签里显示html内容
            },
        })
    })
</script>
<script>
    $.ajax({
        url: "/water/waterInDis", //请求地址
        dataType: "json", //数据格式
        type: "get", //请求方式
        async: true, //是否异步请求
        success: function(res) { //如何发送成功
            var html = "";
            var ht = "";
            var data = res.data
                // console.log(res);

            // // console.log(data);
            //遍历data数组


            html += `
                <span>` + data[0] + `</span>`
            ht += `
                <span>` + data[1] + `</span>`


            $("#wrap").html(html);
            $("#wrac").html(ht); //在html页面id=ulul的标签里显示html内容
        },
    })
</script>
<script type="text/javascript">
    $(document).ready(function() {

        $.ajax({
                url: "/water/findMiddleData", //请求地址
                dataType: "json", //数据格式
                type: "get", //请求方式
                async: false, //是否异步请求
                success: function(res) { //如何发送成功

                    var data = res.data
                    //console.log(data)
                    for (var i = 0; i < data.length; i++) {
                        var bs = data[i];
                        //console.log(bs)


                    }



                },
            })
            // var a = data[1]
            // console.log(a)
    })

    var myChart = echarts.init(document.getElementById('leida'));
    option = {

        color: ['#00c2ff', '#f9cf67', '#e92b77'],
        legend: {
            show: true,
            // icon: 'circle',//图例形状
            bottom: 0,
            center: 0,
            itemWidth: 14, // 图例标记的图形宽度。[ default: 25 ]
            itemHeight: 14, // 图例标记的图形高度。[ default: 14 ]
            itemGap: 21, // 图例每项之间的间隔。[ default: 10 ]横向布局时为水平间隔，纵向布局时为纵向间隔。
            textStyle: {
                fontSize: 12,
                color: '#ade3ff'
            },
            data: ['2016', '2017', '2018'],
        },
        radar: [{

            indicator: [{
                text: '重庆市',
                max: 100
            }, {
                text: '北京市',
                max: 100
            }, {
                text: '上海市',
                max: 100
            }, {
                text: '广东省',
                max: 100
            }, {
                text: '浙江省',
                max: 100
            }],

            textStyle: {
                color: 'red'
            },
            center: ['50%', '50%'],
            radius: 60,
            startAngle: 90,
            splitNumber: 3,
            orient: 'horizontal', // 图例列表的布局朝向,默认'horizontal'为横向,'vertical'为纵向.
            // shape: 'circle',
            // backgroundColor: {
            //     image:imgPath[0]
            // },
            name: {
                formatter: '{value}',
                textStyle: {
                    fontSize: 12, //外圈标签字体大小
                    color: '#5b81cb' //外圈标签字体颜色
                }
            },
            splitArea: { // 坐标轴在 grid 区域中的分隔区域，默认不显示。
                show: true,
                areaStyle: { // 分隔区域的样式设置。
                    color: ['#141c42', '#141c42'], // 分隔区域颜色。分隔区域会按数组中颜色的顺序依次循环设置颜色。默认是一个深浅的间隔色。
                }
            },
            // axisLabel:{//展示刻度
            //     show: true
            // },
            axisLine: { //指向外圈文本的分隔线样式
                lineStyle: {
                    color: '#153269'
                }
            },
            splitLine: {
                lineStyle: {
                    color: '#113865', // 分隔线颜色
                    width: 1, // 分隔线线宽
                }
            }
        }, ],
        series: [{
            name: '雷达图',
            type: 'radar',
            itemStyle: {
                emphasis: {
                    lineStyle: {
                        width: 4
                    }
                }
            },
            data: [{
                name: '2016',
                value: [85, 65, 55, 90, 82],
                areaStyle: {
                    normal: { // 单项区域填充样式
                        color: {
                            type: 'linear',
                            x: 0, //右
                            y: 0, //下
                            x2: 1, //左
                            y2: 1, //上
                            colorStops: [{
                                offset: 0,
                                color: '#00c2ff'
                            }, {
                                offset: 0.5,
                                color: 'rgba(0,0,0,0)'
                            }, {
                                offset: 1,
                                color: '#00c2ff'
                            }],
                            globalCoord: false
                        },
                        opacity: 1 // 区域透明度
                    }
                },
                symbolSize: 2.5, // 单个数据标记的大小，可以设置成诸如 10 这样单一的数字，也可以用数组分开表示宽和高，例如 [20, 10] 表示标记宽为20，高为10。
                label: { // 单个拐点文本的样式设置
                    normal: {
                        show: true, // 单个拐点文本的样式设置。[ default: false ]
                        position: 'top', // 标签的位置。[ default: top ]
                        distance: 2, // 距离图形元素的距离。当 position 为字符描述值（如 'top'、'insideRight'）时候有效。[ default: 5 ]
                        color: '#6692e2', // 文字的颜色。如果设置为 'auto'，则为视觉映射得到的颜色，如系列色。[ default: "#fff" ]
                        fontSize: 14, // 文字的字体大小
                        formatter: function(params) {
                            return params.value;
                        }
                    }
                },
                itemStyle: {
                    normal: { //图形悬浮效果
                        borderColor: '#00c2ff',
                        borderWidth: 2.5
                    }
                },
                // lineStyle: {
                //     normal: {
                //         opacity: 0.5// 图形透明度
                //     }
                // }
            }, {
                name: '2017',
                value: [50, 20, 45, 30, 75],
                symbolSize: 2.5,
                itemStyle: {
                    normal: {
                        borderColor: '#f9cf67',
                        borderWidth: 2.5,
                    }
                },
                areaStyle: {
                    normal: { // 单项区域填充样式
                        color: {
                            type: 'linear',
                            x: 0, //右
                            y: 0, //下
                            x2: 1, //左
                            y2: 1, //上
                            colorStops: [{
                                offset: 0,
                                color: '#f9cf67'
                            }, {
                                offset: 0.5,
                                color: 'rgba(0,0,0,0)'
                            }, {
                                offset: 1,
                                color: '#f9cf67'
                            }],
                            globalCoord: false
                        },
                        opacity: 1 // 区域透明度
                    }
                },
                // lineStyle: {
                //     normal: {
                //         opacity: 0.5// 图形透明度
                //     }
                // }
            }, {
                name: '2018',
                value: [37, 80, 12, 50, 25],
                symbolSize: 2.5,
                itemStyle: {
                    normal: {
                        borderColor: '#e92b77',
                        borderWidth: 2.5,
                    }
                },
                areaStyle: {
                    normal: { // 单项区域填充样式
                        color: {
                            type: 'linear',
                            x: 0, //右
                            y: 0, //下
                            x2: 1, //左
                            y2: 1, //上
                            colorStops: [{
                                offset: 0,
                                color: '#e92b77'
                            }, {
                                offset: 0.5,
                                color: 'rgba(0,0,0,0)'
                            }, {
                                offset: 1,
                                color: '#e92b77'
                            }],
                            globalCoord: false
                        },
                        opacity: 1 // 区域透明度
                    }
                }
            }]
        }, ]
    };


    // myChart.setOption(option);


    myChart.setOption(option);
</script>
<script type="text/javascript">
    var data;
    var ls;
    $.ajax({
        url: "/water/findWaterType", //请求地址
        dataType: "json", //数据格式
        type: "get", //请求方式
        async: false, //是否异步请求
        success: function(res) { //如何发送成功
            data = res.data
            //console.log(data)

            for (var i = 0; i < data.length; i++) {
                var ls = data[i];
                //console.log(ls)
                    //data += ` <div class="title-nav" id="huaxing"> ` + +`</div>`

            }
            // $("#wrp").html(data); //在html页面id=ulul的标签里显示html内容
        },

    })
    var v1 = data[0];
    //console.log(v1)
    var v2 = data[1];
    //console.log(v2)
    var v3 = data[2];
   // console.log(v3)
    var v4 = data[3]
    //console.log(v4)

    // var v0 = data[0]

    // var v1 = data[1]
    // var v2 = data[2]


    // var ls = []
    //             for (k in data) {
    //                 ls[k] = data[k]
    //             }
    //             console.log(ls);



    var myChart1 = echarts.init(document.getElementById('huaxing'));

    var dataStyle = {
        normal: {
            label: {
                show: false
            },
            labelLine: {
                show: false
            },
            shadowBlur: 0,
            shadowColor: '#203665'
        }
    };
    option1 = {

        series: [{
            name: '第一个圆环',
            type: 'pie',
            clockWise: false,
            radius: [45, 55],
            itemStyle: dataStyle,
            hoverAnimation: false,
            center: ['15%', '50%'],
            data: [{
                value: v1,
                label: {
                    normal: {
                        rich: {
                            a: {
                                color: '#3a7ad5',
                                align: 'center',
                                fontSize: 14,
                                fontWeight: "bold"
                            },
                            b: {
                                color: '#fff',
                                align: 'center',
                                fontSize: 12
                            }
                        },
                        formatter: function(params) {
                            return "{b|饮用水质}\n\n" + "{a|" + params.value + "个}" + "\n\n{b|增长2%}";
                        },
                        position: 'center',
                        show: true,
                        textStyle: {
                            fontSize: '12',
                            fontWeight: 'normal',
                            color: '#fff'
                        }
                    }
                },
                itemStyle: {
                    normal: {
                        color: '#2c6cc4',
                        shadowColor: '#2c6cc4',
                        shadowBlur: 0
                    }
                }
            }, {
                value: v4 - v1,
                name: 'invisible',
                itemStyle: {
                    normal: {
                        color: '#24375c'
                    },
                    emphasis: {
                        color: '#24375c'
                    }
                }
            }]
        }, {
            name: '第二个圆环',
            type: 'pie',
            clockWise: false,
            radius: [45, 55],
            itemStyle: dataStyle,
            hoverAnimation: false,
            center: ['50%', '50%'],
            data: [{
                value: v2,
                label: {
                    normal: {
                        rich: {
                            a: {
                                color: '#d03e93',
                                align: 'center',
                                fontSize: 14,
                                fontWeight: "bold"
                            },
                            b: {
                                color: '#fff',
                                align: 'center',
                                fontSize: 12
                            }
                        },
                        formatter: function(params) {
                            return "{b|生活用水}\n\n" + "{a|" + params.value + "个}" + "\n\n{b|增长2%}";
                        },
                        position: 'center',
                        show: true,
                        textStyle: {
                            fontSize: '12',
                            fontWeight: 'normal',
                            color: '#fff'
                        }
                    }
                },
                itemStyle: {
                    normal: {
                        color: '#ef45ac',
                        shadowColor: '#ef45ac',
                        shadowBlur: 0
                    }
                }
            }, {
                value: v4 - v2,
                name: 'invisible',
                itemStyle: {
                    normal: {
                        color: '#412a4e'
                    },
                    emphasis: {
                        color: '#412a4e'
                    }
                }
            }]
        }, {
            name: '第三个圆环',
            type: 'pie',
            clockWise: false,
            radius: [45, 55],
            itemStyle: dataStyle,
            hoverAnimation: false,
            center: ['85%', '50%'],
            data: [{
                value: v3,
                label: {
                    normal: {
                        rich: {
                            a: {
                                color: '#603dd0',
                                align: 'center',
                                fontSize: 14,
                                fontWeight: "bold"
                            },
                            b: {
                                color: '#fff',
                                align: 'center',
                                fontSize: 12
                            }
                        },
                        formatter: function(params) {
                            return "{b|自来水}\n\n" + "{a|" + params.value + "个}" + "\n\n{b|增长2%}";
                        },
                        position: 'center',
                        show: true,
                        textStyle: {
                            fontSize: '12',
                            fontWeight: 'normal',
                            color: '#fff'
                        }
                    }
                },
                itemStyle: {
                    normal: {
                        color: '#613fd1',
                        shadowColor: '#613fd1',
                        shadowBlur: 0
                    }
                }
            }, {
                value: v4 - v3,
                name: 'invisible',
                itemStyle: {
                    normal: {
                        color: '#453284'
                    },
                    emphasis: {
                        color: '#453284'
                    }
                }
            }]
        }]
    }
    myChart1.setOption(option1);
</script>
